<template>
  <div class="box1">
    <h4>基础用法</h4>
    <div class="tab">
      <qr-tabs v-model="index">
         <qr-tab-item label="tab1">tab1</qr-tab-item>
         <qr-tab-item label="tab2">tab2</qr-tab-item>
         <qr-tab-item label="tab3">tab3</qr-tab-item>
         <qr-tab-item label="tab4">tab4</qr-tab-item>
      </qr-tabs>
    </div>
    <div class="show">
      <span @click='ShowMsg'>{{msg}}</span>
     <div class="markdown-body" v-show="isShow" >
      <tab1-md></tab1-md>
     </div>
    </div>
  </div>
</template>

<script>
import Tab1Md from '@/markdown/tab/Tab1.md'
export default {
 name: 'Tab1',
 components: {
   Tab1Md
 },
 data() {
    return {
      isShow: true,
      msg: '隐藏代码',
      index: 0
    }
 },
 methods: {
   ShowMsg() {
     this.isShow = !this.isShow;
     this.isShow == true ? this.msg = '隐藏代码' : this.msg = '显示代码'
   }
 }
}
</script>

<style lang="scss" scoped>
   .tab {
     margin-top: 15px;
   }
   h3 {
    font-weight: 400;
   }
   span {
     font-size: 14px;
     display: block;
     height: 50px;
     color:  #409eff ;
     margin-left: 300px;
     opacity: .7;
   }
   span:hover {
     color:  #409eff ;
     opacity: 1;
     cursor: pointer;
   }
   .markdown-body {
     font-size: 17px;
   }
   .box1 {
     width: 1000px;
     margin-top: 20px;
     border: 1px #ccc solid;
     border-radius: 5px;
     padding: 10px 20px;
     box-shadow: 7px 7px 7px -3px rgba(0, 0,0, .2);
   }
</style>


